<template>
  <div class="main-container">
    <div style="background-color: #fff; height: 100%" id="GreigeClothProductionProcessManagement">
      <a-tabs
        :lazy-load="true"
        type="card"
        @change="tabsChange"
        justify
        style="height: 100%"
        :default-active-key="pageData.tableIndex"
      >
        <a-tab-pane title="坯布生产过程节点管理" key="1">
          <div style="height: 100%">
            <NodeManagement />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, getCurrentInstance } from 'vue'
  import NodeManagement from './components/NodeManagement/index.vue'
  import emitter from '@/hooks/useEventBus'
  export default defineComponent({
    name: 'GreigeClothProductionProcessManagement',
    components: {
      NodeManagement,
    },
    setup() {
      const { proxy } = getCurrentInstance()
      const tabValue = ref<any>(proxy.$route.query.key)
      const pageData = reactive<any>({
        tableIndex: tabValue || '1',
      })

      const tabsChange = (e: string | number) => {
        emitter.emit('window-change')
      }
      return {
        pageData,
        tabsChange,
        tabValue,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .main-container {
    height: 100%;
  }
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
